<template>
  <div class="background-animation">
    <div class="sun-rays"></div>
    <div class="starry-sky"></div>
  </div>
</template>

<style scoped>
/* 背景动画效果 */
.background-animation {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  opacity: 0.8;
  transition: opacity 1.2s ease;
}

/* 日光效果 */
.sun-rays {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 167, 38, 0.1) 0%, transparent 70%);
  opacity: 0.5;
  animation: rotate 60s linear infinite;
}

/* 星光效果 */
.starry-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(white, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    radial-gradient(white, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 300px 300px, 200px 200px, 100px 100px;
  background-position: 0 0, 40px 60px, 130px 270px;
  opacity: 0;
}

.night-theme .starry-sky {
  opacity: 0.6;
  animation: twinkle 5s infinite alternate;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes twinkle {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.9;
  }
}
</style>
